<template>
  <div class="chart-container">
    <el-row>
      <el-col :span="5">
        <panel :filter-payload="filterPayload" :preview="preview" @getFilter="getFilter" />
      </el-col>
      <el-col :span="19">
        <div class="chart-body">
          <div v-if="filterPayload.chartOption.data===null" />
          <div v-else-if="filterPayload.chartOption.types === 'pivot'" v-html="filterPayload.chartOption.data" />
          <div v-else class="chart-div">
            <div v-for="(item,i) in filterPayload.chartOption.data" :key="i" class="chart-div-class" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Panel from './components/graph/Panel'
import elDragDialog from '@/directive/el-drag-dialog'
import { filterVisual, saveVisualTemplate } from '@/api/visualFilter'
import echarts from 'echarts'
import resize from './components/graph/mixins/resize'
export default {
  name: 'BrandIndex',
  components: {
    Panel
  },
  directives: {
    elDragDialog
  },
  mixins: [resize],
  data: function() {
    return {
      charts: [],
      dialogTableVisible: false,
      // 过滤条件
      filterPayload: {
        // 分页
        listQuery: {
          pageSize: 20,
          page: 1,
          total: 0
        },
        // 表名
        tableName: '',
        // 过滤条件
        filters: [],
        // 图形模式
        graphicsModel: 'line',
        // 显示的模式
        showMode: 'newVisual',
        // 值字段
        valueField: {
          field: '',
          symbol: '',
          toField: ''
        },
        // 区间字段
        intervalField: '',
        // 区间字段格式化
        intervalFieldDataFormat: '%Y-%m-%d',
        // 显示的标题
        showField: '',
        // 排序
        sortBy: 'asc',
        // 后端返回来的echarts图形
        chartOption: {
          data: null,
          types: 'line'
        },
        barShowLabel: true,
        // 显示模式
        trigger: 'item'
      },
      // 预览sql
      preview: {
        sql: ''
      }
    }
  },
  methods: {
    /**
     * 过滤
     * @param data 子组件传参的数据
     * @param isSave 是否为保存
     */
    getFilter(data, isSave) {
      this.filterPayload = data
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      filterVisual(this.filterPayload).then((ret) => {
        this.filterPayload = ret.data.fromData
        this.filterPayload.chartOption = ret.data.charts
        this.preview.sql = ret.data.sql
        this.chartOpera()
        loading.close()
        this.$notify({
          title: '成功',
          message: '获取筛选数据成功',
          type: 'success'
        })
      }).catch(() => {
        loading.close()
      })
      if (isSave === true) {
        saveVisualTemplate(this.filterPayload).then((res) => {
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success'
          })
          loading.close()
        }).catch(_ => {
          loading.close()
        })
      }
    },
    /**
     * 生成图形
     */
    chartOpera() {
      if (this.filterPayload.chartOption.data !== null) {
        if (this.filterPayload.chartOption.types === 'pivot') {
          this.html = this.filterPayload.chartOption.data
        } else {
          // 清空
          this.charts.forEach(item => {
            item.dispose()
          })
          this.charts = []
          const v = document.getElementsByClassName('chart-div-class')
          this.filterPayload.chartOption.data.forEach((item, i) => {
            this.charts.push(echarts.init(v[i]))
            this.charts[i].setOption(item)
          })
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.chart-container{
  background-color: #344b58;
}
  .chart-panel {
    position: fixed;
    top: 9%;
    right: 0;
  }
  .chart-body{
    overflow:auto;
    width: 100%;
    height: 91vh;
    .chart-div{
      width: 100%;
      height: 100%;
      .chart-div-class{
      width: 100%;
      height: 100%;
      margin-bottom: 10%;
    }
    }
  }
  .dataframe{
    color: #FFFFFF;
  }

</style>
